<template>
	<view>
		<cu-custom :bgImage="bgImg" :isBack="true">
			<view slot="content">充值记录</view>
		</cu-custom>
		<view class="mypet-center mt10" v-if="recordList.length >0">
			<u-swipe-action class="pet-profile" v-for="(item,index) in recordList" :key="item._id" :index="index" @click="delHistory" @open="open" :options="options">
				<view class="padding flex justify-between align-center" @click="toShowDetail(item)">
					<view>{{item.total_fee/100}}元</view>
					<view class="text-green" style="width: 150rpx;">+{{item.integral}}积分</view>
					<view class="text-sm">
						<text v-if="item.status===1" class="text-green">已支付</text>
						<text v-else class="text-red">未支付</text>
					</view>
					<view>{{item.create_time |formatDate}}</view>
				</view>
				<u-line></u-line>
			</u-swipe-action>
		</view>
		<view v-else class="mypet-center mt10">
			<u-empty></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/customBg.jpg',
				recordList: [],
			};
		},
		onLoad() {
			this.getChargeRecord();
		},
		methods: {
			async getChargeRecord() {
				try {
					const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'pay', data: { $url: 'myChargeRecord' } });
					if (code == 200) {
						this.recordList = data;
					} else {
						this.recordList = [];
					}
				} catch (error) {
					console.error('Error calling cloud function:', error);
					this.recordList = [];
				}
			},
			toShowDetail(item) {
				uni.navigateTo({
					url: '/pages_subpackage/result/result?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss">
	.mypet-center {
		.pet-profile {

			// border-top-left-radius: 28rpx;
			// border-top-right-radius: 28rpx;
			.pet-avatar-box {
				padding: 30rpx 20rpx;
				background-color: white;

				// border-top-left-radius: 28rpx;
				// border-top-right-radius: 28rpx;
			}

			.row-info {
				padding: 30rpx 20rpx;
				background-color: white;

				.label {
					width: 180rpx;
				}
			}

			.bdb-line {
				border-bottom: 1rpx solid #e5e5e5;
			}
		}

		.save-btn {
			margin-top: 40rpx;
			height: 88rpx;
			margin-left: 54rpx;
			margin-right: 54rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
	}

	.text-name {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
</style>